<template>
  <div class="wrap">
    <div class="page-head">
      <a-breadcrumb>
        <a-breadcrumb-item>{{$t('role.role.60zejux960k0')}}</a-breadcrumb-item>
        <a-breadcrumb-item>{{$t('invitationCode.invitationCode.6234xs274xc0')}}</a-breadcrumb-item>
      </a-breadcrumb>
    </div>
    <c-table-search :loading="form.loading" v-model:model="form.data" @refresh="getData">
      <template v-slot:add>
        <a-button type="primary" v-permission="['invitationCode:bind']" @click="handleDind">
          <template #icon>
            <icon-plus />
          </template>
          {{$t('invitationCode.invitationCode.6234xs27kfo0')}}
        </a-button>
      </template>
    </c-table-search>
    <div class="table-scroll">
      <c-table :list="form.list" :loading="form.loading" :count="form.count" v-model:data="form.data"
        @refresh="getData">
        <a-table-column :title="$t('invitationCode.invitationCode.6034xs27kzw1')" ellipsis tooltip :width="400" v-if="local.usermsg.id == 3">
          <template #cell="{ record }">
            {{ record.name? record.name: '-' }}
          </template>
        </a-table-column>
        <a-table-column :title="$t('invitationCode.invitationCode.6234xs27kzw1')" ellipsis tooltip :width="400">
          <template #cell="{ record }">
            {{ record.code? record.code: '-' }}
          </template>
        </a-table-column>
        <a-table-column :title="$t('invitationCode.invitationCode.6234xs27kzw2')" ellipsis tooltip :width="400">
          <template #cell="{ record }">
            {{ record.createTime ? dayjs.unix(record.createTime).format('YYYY-MM-DD HH:mm:ss') : '-' }}
          </template>
        </a-table-column>
        <a-table-column :title="$t('riskControl.riskControl.60zeizn0jbg0')" fixed='right' :width="240">
          <template #cell="{ record }">
            <a-space>
              <a-button type="text" status="danger" v-permission="['invitationCode:unbind']" @click="handleUnbind(record)">{{$t('invitationCode.invitationCode.6234xs27kzw0')}}</a-button>
            </a-space>
          </template>
        </a-table-column>
      </c-table>
    </div>
  </div>
</template>

<script lang='ts' setup>
import { apiRiskList } from '@/api/risk'
import dayjs from 'dayjs'
const local = useLocal()
const form = reactive({
  create: {
    show: false
  },
  // auths:[],
  // allAuths:[],
  data: {
    page: 1,
    pageSize: 10,
    uid:local.usermsg.id == 3 ? 0 : local.usermsg.id
    // limit: 5
  },
  loading: false,
  list: [],
  count: 0
})
// 邀请码管理列表
const getData = async () => {
  form.loading = true
  const { code, data } = await apiRiskList({
    ...form.data
  })
  form.loading = false
  if (code != 200) return;
  form.list = data.list
  form.count = data.total
}
//绑定
const handleDind = () => {
  console.log('绑定关系')
}
// 解绑
const handleUnbind = async (record: any) => {
  useModal.warning({
    content: t('invitationCode.invitationCode.6234xs27kzw3'),
    onBeforeOk: async () => {
      const { code } = await apiRiskDelete({
        id: record.id
      })
      if (code != 200) return false;
      useMessage.success()
      getData()
      return true
    }
  })
}
onBeforeMount(() => {
  getData()
})
</script>

<style scoped lang="less">
.show {
  display: none
}

.color {
  width: 30px;
  height: 30px;
  border-radius: 2px;
}
</style>
